<template>
  <div class="container">
    <ul class="doc-list">
      <li class="list-item clearfix" v-for="(item, index) in doctorList" :key="index">
        <!-- 医生信息 -->
        <div class="checkbox" v-if="isEdit">
          <img v-if="item.isChecked" :src="base_url+'/checked.png'" alt @click="changeChecked(item)"/>
          <img v-if="!item.isChecked" :src="base_url+'/check.png'" alt @click="changeChecked(item)" />
        </div>
        <div class="main" @click="to_detail(item)">
          <div class="left">
            <!-- 头像 -->
            <div class="doc-logo">
              <img :src="img_url+item.image" v-if="img_url&&item.image" alt mode="widthFix" class="img"/>
              <!-- 下架 -->
              <img v-if="item.status==1" class="xiajia" :src="base_url+'/xiajia.png'" alt />
            </div>
            <!-- 认证 -->
            <div class="tip" v-if="item.vip==1">
              <img :src="base_url+'/mp_2.4/yishengbiaoshi-xiao/VIP@2x.png'" v-if="base_url" class="img"/>
            </div>
          </div>
          <div class="info">
            <!-- 医生信息 -->
            <div class="doc-info">
              <span class="doc-name">{{item.name}}</span>
              <span class="doc-leval" v-if="item.position">{{item.position}}</span>
            </div>
            <!-- 预约和案例数 -->
            <div class="divtags clearfix">
              <div v-if="item.reservationNumber" class="divtag-item">预约: {{item.reservationNumber}}</div>
              <span v-if="item.caseNumber" class="hang"></span>
              <div v-if="item.caseNumber" class="divtag-item">案例: {{item.caseNumber}}</div>
            </div>
            <!-- 标签 -->
            <div class="tags fix" v-if="item.tagList[0]">
              <div
                class="tag-item"
                :class="{'status-2':tag.color==1,'status-1':tag.color==2}"
                v-for="(tag, i) in item.tagList"
                :key="i"
              >
                <div class="icon"></div>
                <div class="msg">{{tag.name}}</div>
              </div>
            </div>
            <!-- 集团 -->
            <div class="hos-name">{{item.hospitalName}}</div>
            <!-- 专长 -->
            <div class="speciality clearfix" v-if="item.labelList">
              <div class="speciality-item" v-for="(val, key) in item.labelList" :key="key">{{val}}</div>
            </div>
            <div class="score">
              <img class="star" :src="item.star>=1?base_url+'/collection/star.png':base_url+'/collection/star_no.png'" alt/>
              <img v-if="item.star==1.5" class="star" :src="base_url+'/collection/star_ban.png'"/>
              <img class="star" :src="item.star>=2?base_url+'/collection/star.png':base_url+'/collection/star_no.png'" alt/>
              <img v-if="item.star==2.5" class="star" :src="base_url+'/collection/star_ban.png'"/>
              <img class="star" :src="item.star>=3?base_url+'/collection/star.png':base_url+'/collection/star_no.png'" alt/>
              <img v-if="item.star==3.5" class="star" :src="base_url+'/collection/star_ban.png'"/>
              <img class="star" :src="item.star>=4?base_url+'/collection/star.png':base_url+'/collection/star_no.png'" alt/>
              <img v-if="item.star==4.5" class="star" :src="base_url+'/collection/star_ban.png'"/>
              <img class="star" :src="item.star>=5?base_url+'/collection/star.png':base_url+'/collection/star_no.png'" alt/>
              <span class="num1">{{item.star}}分</span>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data() {
    return {
      base_url: common.image_resource,
      img_url: common.image_response,
      score: 4
    };
  },
  props: {
    isEdit: false,
    doctorList: []
  },
  watch: {
    doctorList(newval, oldval) {
      this.doctorList = newval;
    }
  },
  methods: {
    // 单选
    changeChecked(item) {
      item.isChecked = !item.isChecked;
      this.$emit("doctorClick", this.doctorList);
    },
    // 查看详情
    to_detail(item) {
      if (item.status == 1) {
        return;
      }
      wx.navigateTo({
        url: "/pages/package_projects/doctordetail/main?id=" + item.id
      });
    }
  },
  created() {}
};
</script>

<style lang="less" scoped>
.container {
  .doc-list {
    padding: 10px;
    box-sizing: border-box;
    .list-item {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      .checkbox {
        width: 20px;
        height: 20px;
        margin-right: 15px;
        img {
          width: 20px;
          height: 20px;
        }
      }
      .main {
        width: 100%;
        padding: 10px;
        background:rgba(255,255,255,1);
        box-shadow:0px 2px 6px 0px rgba(240,240,240,1);
        border-radius:5px;
        display: flex;
        .left {
          width: 50px;
          height: 50px;
          position: relative;
          .doc-logo {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            position: relative;
            overflow: hidden;
            .img {
              width: 100%;
              display: block;
            }
            .xiajia,
            .quehuo {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              z-index: 11;
            }
          }
          .tip {
            width: 13px;
            height: 13px;
            position: absolute;
            bottom: 1px;
            right: 3px;
            .img {
              width: 100%;
              height: 100%;
            }
          }
        }
        .info {
          flex: 1;
          padding-left: 10px;
          position: relative;
          .doc-info {
            .doc-name {
              font-size:16px;
              font-family:PingFangSC-Regular,PingFang SC;
              font-weight:400;
              color:rgba(51,51,51,1);
              line-height:22px;
            }
            .doc-leval {
              font-size: 12px;
              font-family:PingFangSC-Regular,PingFang SC;
              font-weight: 400;
              color: #999999;
              line-height: 17px;
              margin-left: 5px;
            }
          }
          .divtags {
            margin-top: 4px;
            .divtag-item {
              display: inline-block;
              font-size:12px;
              font-family:PingFangSC-Regular,PingFang SC;
              font-weight:400;
              color:#999999;
              line-height:17px;
            }
            .hang {
              display: inline-block;
              width:3px;
              height:10px;
              background:linear-gradient(180deg,rgba(238,238,238,0) 0%,rgba(228,228,228,1) 46%,rgba(216,216,216,0) 100%);
              border-radius:2px;
              margin: 0 10px;
            }
          }
          .hos-name {
            margin-top: 9px;
            font-size:12px;
            font-family:PingFangSC-Regular,PingFang SC;
            font-weight:400;
            color:#999999;
            line-height:17px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
          .tags {
            margin-top: 6px;
            padding-left: 10px;
            width: 100%;
            .tag-item {
              float: left;
              margin-right: 15px;
              margin-bottom: 5px;
              position: relative;
              .icon {
                width: 21px;
                height: 21px;
                background-repeat: no-repeat;
                background-position: center;
                background-size: 100% 100%;
                position: absolute;
                left: 0;
                top: 50%;
                transform: translate(-50%, -50%);
                z-index: 10;
              }
              .msg {
                padding-left: 12px;
                padding-right: 6px;
                height: 16px;
                border-radius: 0px 8px 8px 0px;
                font-size: 11px;
                font-family: "PingFangSC-Semibold";
                font-weight: 600;
                color: rgba(255, 255, 255, 1);
                line-height: 16px;
                background-repeat: no-repeat;
                background-position: right center;
                background-size: 100% 100%;
                letter-spacing: 1px;
              }
            }
            // 水绿色-名医合伙人
            .status-4 {
              .icon {
                background-image: url("https://img.ameimeika.com/h5_images/mp_images/green.png");
              }
              .msg {
                background: #abffe9;
                box-shadow: 0px 1px 2px 0px rgba(171, 255, 233, 1);
              }
            }
            // 红色-严选认证
            .status-3 {
              .icon {
                background-image: url("https://img.ameimeika.com/h5_images/mp_images/red.png");
              }
              .msg {
                background: #ffbfe4;
                box-shadow: 0px 1px 2px 0px rgba(255, 191, 228, 1);
              }
            }
            // 紫色-明星专家
            .status-2 {
              .icon {
                background-image: url("https://img.ameimeika.com/h5_images/mp_images/purple.png");
              }
              .msg {
                background: #ababff;
                box-shadow: 0px 1px 2px 0px rgba(171, 171, 255, 1);
              }
            }
            // 蓝色-认证认证
            .status-1 {
              .icon {
                background-image: url("https://img.ameimeika.com/h5_images/mp_images/blue.png");
              }
              .msg {
                background: #6ea9fc;
                box-shadow: 0px 1px 2px 0px rgba(110, 169, 252, 0.79);
              }
            }
          }
          .speciality {
            .speciality-item {
              height: 21px;
              padding: 0 10px;
              background: rgba(237, 239, 242, 1);
              border-radius: 11px;
              font-size: 12px;
              font-family: "PingFangSC-Light";
              font-weight: 300;
              color: rgba(51, 51, 51, 1);
              line-height: 21px;
              text-align: center;
              margin-top: 10px;
              margin-right: 5px;
              float: left;
            }
          }
          .score {
            width: auto;
            display: block;
            position: absolute;
            top: 5px;
            right: 0px;
            .star {
              width: 12px;
              height: 12px;
              margin-left: 4px;
            }
            .num1 {
              margin-left: 6px;
              font-size:12px;
              font-family:PingFangSC-Regular,PingFang SC;
              font-weight:400;
              color:#FF9800;
              vertical-align: 2rpx;
            }
          }
        }
      }
    }
  }
}
</style>


